<template>
  <div class="container">
    <div class="content">
      <div class="topBox">
        <div class="left">
          <el-button
            v-permission="'accountManagementAdd'"
            class="btnColor"
            @click="handleDetail()"
            >添加+</el-button
          >
        </div>
        <div class="right">
          <div class="form">
            <el-form
              ref="form"
              :model="form"
              label-width="10px"
              class="formSelf"
            >
              <el-form-item>
                <el-input v-model="form.name" placeholder="请输入姓名" />
              </el-form-item>
              <el-form-item>
                <el-input v-model="form.phone" placeholder="请输入联系电话" />
              </el-form-item>
              <el-form-item>
                <el-button
                  class="search"
                  icon="el-icon-search"
                  @click="searchForm"
                  >查询</el-button
                >
                <el-button
                  class="reset"
                  icon="el-icon-refresh-right"
                  @click="resetForm"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column
            align="center"
            prop="userName"
            label="账号"
            width="180"
          />
          <el-table-column align="center" prop="name" label="姓名" />

          <el-table-column align="center" prop="phone" label="联系电话" />
          <el-table-column align="center" prop="roleName" label="角色名称" />
          <el-table-column align="center" prop="departmentName" label="部门" />
          <el-table-column align="center" prop="createTime" label="创建时间" />

          <el-table-column
            align="center"
            prop="address"
            label="操作"
            width="280"
          >
            <template slot-scope="scope">
              <div class="btnBox">
                <div
                  slot="reference"
                  class="first"
                  @click="handleDetail(scope.row)"
                  v-permission="'accountManagementEdit'"
                >
                  <i class="el-icon-edit" />编辑
                </div>
                <div
                  slot="reference"
                  class="second"
                  @click="resetPassword(scope.row)"
                  v-permission="'accountManagementReset'"
                >
                  重置密码
                </div>

                <div
                  slot="reference"
                  class="last"
                  icon="el-icon-edit"
                  @click="delDetail(scope.row)"
                  v-permission="'accountManagementDelete'"
                >
                  <i class="el-icon-delete" />删除
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="params.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next"
          :total="totalItemCount"
          @size-change="handleSizeChange"
          @current-change="currentPage"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { userList, userDelete } from "@/api/systemManagement";
export default {
  name: "UserManagement",
  data() {
    return {
      form: {
        name: null,
        phone: null,
      },
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      totalItemCount: null,
      loading: true,
    };
  },
  created() {
    this.GetUserList(this.params);
  },
  methods: {
    async GetUserList(obj) {
      const res = await userList(obj);
      // console.log(res);
      this.tableData = res.data.list;
      this.totalItemCount = res.data.total;
      this.loading = false;
    },
    searchForm() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
      };
      const obj = {
        ...this.params,
        name: this.form.name,
        phone: this.form.phone,
      };
      this.GetUserList(obj);
    },
    resetForm() {
      this.form = {
        name: null,
        phone: null,
      };
      this.params = {
        pageNum: 1,
        pageSize: 10,
      };
      this.GetUserList(this.params);
    },
    handleDetail(row) {
      if (row) {
        this.$router.push({
          path: "/accountDetail",
          query: { id: row.id },
        });
      } else {
        this.$router.push({ path: "/accountDetail" });
      }
    },
    resetPassword(row) {
      if (row) {
        this.$router.push({
          path: "/accountDetail",
          query: { id: row.id, type: "resetPwd" },
        });
      } else {
        this.$router.push({ path: "/accountDetail" });
      }
    },

    async delDetail(row) {
      this.$confirm(
        `此操作将永久删除 ${row.userName} 账号, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          const res = await userDelete({ id: row.id });
          this.handleSuccess(res);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSuccess(res) {
      if (res.code == 0) {
        this.$message.success(res.msg);
        this.GetUserList(this.params);
      } else {
        this.$message.error(res.msg);
      }
    },
    handleSizeChange(val) {
      this.params.PageSize = val;

      const obj = {
        ...this.params,
        PageSize: val,
        name: this.form.name,
        phone: this.form.phone,
      };
      this.GetUserList(obj);
    },
    currentPage(val) {
      this.params.pageNum = val;

      const obj = {
        ...this.params,
        pageNum: val,
        name: this.form.name,
        phone: this.form.phone,
      };
      this.GetUserList(obj);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8fafc;
  padding: 10px;
  .btnColor {
    background-color: #249451;
    color: #fff;
    margin-left: 10px;
  }
  .content {
    background-color: #fff;
    padding: 20px 10px;
    .topBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      .left {
        width: 200px;
      }
      .right {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        .form {
          padding: 10px;
          background-color: #fff;
          display: flex;

          justify-content: space-around;
          .formSelf {
            display: flex;
            align-items: center;
            .el-form-item {
              margin-bottom: 0px;
            }
            .search {
              background-color: #249451;
              color: #fff;
            }
            .reset {
              color: #249451;
              border: 1px solid #249451;
            }
            ::v-deep.el-input__inner {
              // background-color: #F5F5FA !important;
              color: #333 !important;
            }
          }
        }
      }
    }
    .tableBox {
      padding: 0 10px;

      .btnBox {
        display: flex;
        justify-content: center;
        align-items: center;
        .first {
          padding: 0 5px;
          height: 25px;
          line-height: 25px;
          background-color: #4285f4;
          color: #fff;
          text-align: center;
          border-radius: 5px;
          cursor: pointer;
        }
        .second {
          padding: 0 5px;
          line-height: 25px;
          background-color: #ffa426;
          color: #fff;
          text-align: center;
          margin-left: 5px;
          border-radius: 5px;
          cursor: pointer;
          margin: 0 5px;
        }
        .third {
          height: 25px;
          line-height: 25px;
          background-color: #d72e2e;
          color: #fff;
          text-align: center;
          margin: 0 5px;
          border-radius: 5px;
          cursor: pointer;
        }
        .third2 {
          width: 50px;
          height: 25px;
          line-height: 25px;
          background-color: #4285f4;
          color: #fff;
          text-align: center;
          margin: 0 5px;
          border-radius: 5px;
          cursor: pointer;
        }
        .last {
          padding: 0 5px;

          // width: 25px;
          height: 25px;
          line-height: 25px;
          background-color: #d72e2e;
          color: #fff;
          text-align: center;
          border-radius: 5px;
          cursor: pointer;
        }
      }
    }
    .footerPage {
      padding: 0 30px 0 0;
      display: flex;
      justify-content: right;
      width: 100%;
      background-color: #f8fafc;
      height: 50px;
      align-items: center;
      margin-top: 10px;

      //  ::v-deep .el-pagination .btn-next, .el-pagination .btn-prev{
      //   background-color: #087 !important;
      // }
    }
  }
  .scopeImg {
    width: 80px;
    height: 60px;
  }
  .greenColor {
    background-color: #dbf8dd;
    color: #00b41f;
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin: 0 auto;
    border-radius: 25px;
    padding: 0 10px;
  }
  .redColor {
    background-color: #f7e9ea;
    color: #e11d48;
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin: 0 auto;
    border-radius: 25px;
    padding: 0 10px;
  }
}
</style>
